* {
  margin: 0;
  padding: 0;
}
ul {
  width: 1000px;
  margin: 200px auto;
  border: 1px solid #cecece;
  display: flex;
  justify-content: space-between;
}
li {
  list-style: none;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  padding-right: 5px;
  border-right: 1px dashed #cecece;
  background-image: url(../img/nav.png);
  background-repeat: no-repeat;
  transition: all 0.3s linear;
}
li:nth-of-type(1) {
  background-position: 8px -54px;
}
li:nth-of-type(2) {
  background-position: 8px -132px;
}
li:nth-of-type(3) {
  background-position: 8px -213px;
}
li:nth-of-type(4) {
  background-position: 8px -296px;
}
li:nth-of-type(5) {
  background-position: 8px -376px;
}
li:nth-of-type(6) {
  background-position: 8px -454px;
}
li:nth-of-type(7) {
  background-position: 8px -530px;
}
li:nth-of-type(8) {
  background-position: 8px -605px;
}
li:nth-of-type(9) {
  background-position: 8px -684px;
}
li:nth-of-type(10) {
  background-position: 8px -761px;
  border-right: none;
}
ul > li > a {
  display: block;
  float: left;
  width: 70px;
  height: 40px;
  margin-left: 25px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: rgb(144, 144, 144);
}
li:hover > a {
  cursor: pointer;
  color: #42af0e;
  /* animation: bgp 1s linear 1 alternate; */
}
li:nth-of-type(1):hover {
  background-position: 8px -92px;
}
li:nth-of-type(2):hover {
  background-position: 8px -173px;
}
li:nth-of-type(3):hover {
  background-position: 8px -254px;
}
li:nth-of-type(4):hover {
  background-position: 8px -336px;
}
li:nth-of-type(5):hover {
  background-position: 8px -416px;
}
li:nth-of-type(6):hover {
  background-position: 8px -494px;
}
li:nth-of-type(7):hover {
  background-position: 8px -566px;
}
li:nth-of-type(8):hover {
  background-position: 8px -645px;
}
li:nth-of-type(9):hover {
  background-position: 8px -723px;
}
li:nth-of-type(10):hover {
  background-position: 8px -801px;
}
